<template>
  <div class="category">
    <van-search
        v-model="value"
        shape="round"
        background="indigo"
        placeholder="请输入搜索关键词"
    />
      <div class="list">
        <div class="left">
        <ul>
          <li
          v-for="category in categories"
          :key="category.id"
          is='router-link'
          tag='li'
          :to="{ name: 'subcategory', params: {suibianqu: category.id} }"
          >{{category.name}}</li>
        </ul>
      </div>
      <div class="right">
        <router-view />
      </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search } from 'vant'

Vue.use(Search)
export default {
  name: 'category',
  data () {
    return {
      value: '',
      categories: []
    }
  },
  created () {
    this.$http.getCategories().then(data => {
      data.list.shift()
      this.categories = data.list
    }).then(() => {
      if (typeof this.$route.params.suibianqu === 'undefined') {
        this.$router.push({
          name: 'subcategory',
          params: {
            suibianqu: this.categories[0].id
          }
        })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.category{
  height: 100%;
  width: 100%;
  .van-search{
    height: 11%;
    .van-search__content{
      border-radius:20px;
      margin-top: 12px;
    }
  }
  .list{
    display: flex;
    height: 89%;
    overflow-x: hidden;
    .left{
      width: 100px;
      text-align: center;
      border-right: 1px solid #ccc;
      overflow-x: hidden;
      li{
        line-height: 37px;
        overflow-x: hidden;
        font-size: 14px;
      }
    }
    .right{
      flex:1;
    }
  }
    .router-link-exact-active.router-link-active{
      background: indigo;
      border-left: 3px solid gold;
      color: gold;
    }
}
</style>
